<template>
  <div>
    <h1 class="app">{{msg}},{{personName}}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现：子传给父数据，先在父定义一个函数 -->
    <Game :getGameName="getGameName"></Game>
    <!-- 通过父组件给子组件绑定一个自定义事件实现 -->
    <!-- <Person v-on:wenqi="getPersonName" @demo="m1"></Person> -->
    <!-- 通过父组件给子组件ref实现 -->
    <Person ref="person" @click.native="show"></Person>
  </div>
</template>

<script>
import Person from './components/Person.vue'
import Game from './components/Game.vue';
export default {
    name:'App',
    data(){
        return{
            msg:'欢迎',
            personName:''
        }
    },
    components:{ Person,Game},
    methods:{
      getGameName(name){
        console.log('App收到游戏名为',name)
    },
      getPersonName(name,...params){
        console.log('App收到人物名为',name,params)
        this.personName = name
    },
      m1(){
      console.log('demo被触发了')
    },
      show(){
        alert('欢迎')
    }
      /* getPersonName(name){
        console.log('App收到人物名为',name)
    }, */
   /*  mounted(){
      setTimeout(()=>{
        this.$refs.person.$on('wenqi',this.getPersonName)
      },3000)
      // this.$refs.person.$once('wenqi',this.getPersonName)触发一次
    } */
}
}
</script>

<style>
    .app{
      color: cornflowerblue;
      padding:5px;
    }
</style>